昨天我們學會了 TDD 的紅綠重構循環,體驗了從無到有開發功能的完整流程。隨著測試越寫越多,你可能開始感到困擾:「這些測試散落各處,很難找到我要的測試」、「類似的測試重複出現,但又不完全一樣」。
想像一個場景:你的數學工具庫現在有 20 個函數,每個函數有 5-8 個測試案例,總共 100 多個測試。當某個測試失敗時,你需要在一大堆 it
中找到問題所在,這時你就會深刻體會到「測試結構」的重要性。
今天我們要學習如何組織測試,讓測試代碼變得清晰、有條理,就像整理房間一樣 —— 相關的東西放在一起,每樣東西都有固定位置。
今天結束後,你將學會:
第一階段:打好基礎(Day 1-10)
├── Day 01 - 環境設置與第一個測試
├── Day 02 - 認識斷言(Assertions)
├── Day 03 - TDD 紅綠重構循環
├── Day 04 - 測試結構與組織 ★ 今天在這裡
├── ...
└── (更多精彩內容待續)
回想昨天的數學工具庫,如果我們繼續用扁平的方式寫測試:
// 混亂的測試結構
it('isPrime with 2 should return true')
it('isPrime with 3 should return true')
it('isPrime with 4 should return false')
it('countPrimesInRange with range 1-10')
it('isPrime with negative number should return false')
it('fibonacci with 0 should return 0')
問題:
isPrime
的測試散落各處// 結構化的測試組織
describe('math utilities', () => {
describe('isPrime', () => {
describe('prime detection', () => {
it('identifies small prime numbers')
it('identifies large prime numbers')
})
describe('composite detection', () => {
it('identifies small composite numbers')
it('identifies large composite numbers')
})
describe('boundary cases', () => {
it('handles negative numbers')
it('handles zero and one')
})
})
})
好處:
測試套件是一組相關測試的集合,用來驗證特定功能或模組。在 Vitest 中,我們用 describe
來創建測試套件:
describe('function name', () => {
it('test case 1')
it('test case 2')
})
describe('MathUtilities', () => { // 頂層套件:模組
describe('isPrime', () => { // 第二層:功能
describe('prime numbers', () => { // 第三層:測試分類
it('detects small primes') // 具體測試案例
it('detects large primes')
})
describe('edge cases', () => {
it('handles zero')
it('handles negative numbers')
})
})
})
這種結構讓測試報告更易讀:
MathUtilities
├── isPrime
│ ├── prime numbers
│ │ ✓ detects small primes
│ │ ✓ detects large primes
│ └── edge cases
│ ✓ handles zero
│ ✓ handles negative numbers
讓我們把昨天的測試重新組織。建立 tests/day04/math-utils.test.ts
:
import { describe, it, expect } from 'vitest'
import { isPrime, countPrimesInRange } from '../../src/math/mathUtils'
describe('MathUtilities', () => {
describe('isPrime', () => {
// 所有 isPrime 相關的測試都放這裡
})
describe('countPrimesInRange', () => {
// 所有 countPrimesInRange 相關的測試都放這裡
})
})
describe('isPrime', () => {
describe('prime numbers', () => {
it('identifies small prime numbers', () => {
expect(isPrime(2)).toBe(true)
expect(isPrime(3)).toBe(true)
expect(isPrime(5)).toBe(true)
expect(isPrime(7)).toBe(true)
})
it('identifies larger prime numbers', () => {
expect(isPrime(11)).toBe(true)
expect(isPrime(13)).toBe(true)
expect(isPrime(17)).toBe(true)
expect(isPrime(19)).toBe(true)
})
})
describe('composite numbers', () => {
it('identifies small composites', () => {
expect(isPrime(4)).toBe(false)
expect(isPrime(6)).toBe(false)
expect(isPrime(8)).toBe(false)
expect(isPrime(9)).toBe(false)
})
})
describe('edge cases', () => {
it('handles numbers below 2', () => {
expect(isPrime(0)).toBe(false)
expect(isPrime(1)).toBe(false)
expect(isPrime(-1)).toBe(false)
})
})
})
按功能分組,每個功能內再按測試類型細分:
describe('isPrime', () => {
describe('valid inputs', () => {
// 正常情況的測試
})
describe('edge cases', () => {
// 邊界值的測試
})
describe('error cases', () => {
// 異常情況的測試(後續會詳細學習)
})
})
describe('isPrime', () => {
// ✅ 好的命名:描述期望的行為
it('identifies prime number 2')
it('identifies composite number 4')
it('handles negative numbers')
// ❌ 不好的命名:過於技術性或冗長
it('should return true when input is 2')
it('isPrime function with negative input should return false')
it('tests if prime detection function works correctly')
})
推薦的命名模式:[動詞] + [對象] + [條件]
// 模式:[動詞] + [對象] + [條件]
it('identifies prime number 2') // identifies + prime number + 2
it('rejects negative numbers') // rejects + negative numbers
it('counts primes in range') // counts + primes in range
it('handles empty range') // handles + empty range
tests/day04/math-utils.test.ts
import { describe, it, expect } from 'vitest'
import { isPrime, countPrimesInRange } from '../../src/math/mathUtils'
describe('MathUtilities', () => {
describe('isPrime', () => {
describe('prime numbers', () => {
it('identifies small primes', () => {
expect(isPrime(2)).toBe(true)
expect(isPrime(3)).toBe(true)
expect(isPrime(5)).toBe(true)
expect(isPrime(7)).toBe(true)
})
it('identifies larger primes', () => {
expect(isPrime(11)).toBe(true)
expect(isPrime(13)).toBe(true)
expect(isPrime(17)).toBe(true)
expect(isPrime(19)).toBe(true)
})
})
describe('composite numbers', () => {
it('identifies small composites', () => {
expect(isPrime(4)).toBe(false)
expect(isPrime(6)).toBe(false)
expect(isPrime(8)).toBe(false)
expect(isPrime(9)).toBe(false)
})
it('identifies larger composites', () => {
expect(isPrime(10)).toBe(false)
expect(isPrime(12)).toBe(false)
expect(isPrime(14)).toBe(false)
expect(isPrime(15)).toBe(false)
})
})
describe('edge cases', () => {
it('handles numbers below 2', () => {
expect(isPrime(0)).toBe(false)
expect(isPrime(1)).toBe(false)
expect(isPrime(-1)).toBe(false)
expect(isPrime(-10)).toBe(false)
})
})
})
describe('countPrimesInRange', () => {
describe('valid ranges', () => {
it('counts primes in small range', () => {
expect(countPrimesInRange(1, 10)).toBe(4) // 2, 3, 5, 7
})
it('counts primes in medium range', () => {
expect(countPrimesInRange(10, 20)).toBe(4) // 11, 13, 17, 19
})
})
describe('edge cases', () => {
it('handles single number range', () => {
expect(countPrimesInRange(2, 2)).toBe(1)
expect(countPrimesInRange(4, 4)).toBe(0)
})
it('handles reversed range', () => {
expect(countPrimesInRange(10, 1)).toBe(0)
})
})
})
})
npm test tests/day04/math-utils.test.ts -- --reporter=verbose
輸出結果會顯示清晰的階層:
MathUtilities
isPrime
prime numbers
✓ identifies small primes
✓ identifies larger primes
composite numbers
✓ identifies small composites
✓ identifies larger composites
edge cases
✓ handles numbers below 2
countPrimesInRange
valid ranges
✓ counts primes in small range
✓ counts primes in medium range
edge cases
✓ handles single number range
✓ handles reversed range
Tests: 9 passed
今天我們從散亂的測試進化到有組織的測試結構:
測試結構與組織不只是美觀,更是實用。良好的組織結構能提高開發效率、降低維護成本、改善團隊協作。記住:好的測試結構是可維護測試代碼的基礎。
明天我們將學習「測試生命週期」,了解如何在測試執行前後進行必要的設置和清理工作。 💪